<template>
  <div id="main"  :style="{height:height,width:width}"></div>
</template>
<script>
import echarts from 'echarts';
import mapJson from '../shanxi.json';

export default {
  name: 'echart-map',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },

  data() {
    return {}
  },
  mounted() {
    this.fn()
  },
  methods: {
    fn() {
      let _this = this;
      let myChart = echarts.init(document.getElementById("main"));
      console.log(mapJson)
      echarts.registerMap("山西", mapJson, {}); //
      var mapJsonlen = mapJson.features.length,
        data = mapJson.features;
      var color = [
       '#2f53f2',
        '#2f53f2',
        '#2f53f2',
        '#2f53f2',
        '#2f53f2',
        '#2f53f2',
        '#2f53f2',
        '#2f53f2',
        '#2f53f2',
        '#2f53f2',
        '#2f53f2',
        '#2f53f2',
        '#2f53f2',
        '#2f53f2',
      ];
      var mapData = mapJson.features.map((item, index) => {
        return {
          name: item.properties.name,
          value: 1000,
          level: item.properties.level,
          cityCode: item.properties.adcode,
          itemStyle: {
            normal: {
              show: true,
              areaColor: color[index] || "#ddd"
            }
          }
        };
      });
      let option = {
        z:0,
        top:0,

        series: [
          {
            name: "地图",
            type: "map",
            mapType: "山西",
            aspectScale: 0.85, //地图长度比
            itemStyle: {
              normal: {
                show: true,
                areaColor: "#031525"
              }
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#000"
                }
              }
            },
            data: mapData
          }
        ]
      };
      myChart.setOption(option);
      myChart.on("click", function (params) {
        console.log(params.data);
      });

      // 窗口改变 重新调用绘制地图
      window.addEventListener('resize', () => {
        if (myChart && myChart.resize) {
          myChart.resize();
        }
      });
    }
  }
};
</script>
